<!--
 * @Author: liaoyu1992 1519778181@qq.com
 * @Date: 2022-11-04 13:47:12
 * @LastEditors: liaoyu1992 1519778181@qq.com
 * @LastEditTime: 2022-11-11 22:04:57
 * @FilePath: \kgantt\core\components\tasklist\TaskList.vue
 * @Description: taskList
-->
<template>
  <div ref="taskListRef" :style="listWidth ? `width:${listWidth}` : ''">
    <div ref="horizontalHeaderContainerRef" class="kgantt-horizontalHeaderContainer">
      <component
        v-if="taskListHeader"
        :is="taskListHeader"
        :header-height="headerHeight"
        :font-family="fontFamily"
        :font-size="fontSize"
        :row-width="rowWidth"
        :resource-area="resourceArea"
      >
      </component>
      <TaskListHeaderDefault
        v-else
        :header-height="headerHeight"
        :font-family="fontFamily"
        :font-size="fontSize"
        :row-width="rowWidth"
        :resource-area="resourceArea"
      ></TaskListHeaderDefault>
    </div>

    <div
      ref="horizontalContainerRef"
      :class="horizontalContainerClass"
      :style="ganttHeight ? 'height:' + ganttHeight + 'px' : ''"
    >
      <component
        v-if="taskListTable"
        :is="taskListTable"
        :row-height="rowHeight"
        :row-width="rowWidth"
        :font-family="fontFamily"
        :font-size="fontSize"
        :tasks="tasks"
        :locale="locale"
        :selected-task-id="selectedTaskId"
        :resource-area="resourceArea"
        @on-expander-click="onExpanderClick"
        @set-selected-task="setSelectedTask"
      ></component>
      <TaskListTableDefault
        v-else
        :is="taskListTable"
        :row-height="rowHeight"
        :row-width="rowWidth"
        :font-family="fontFamily"
        :font-size="fontSize"
        :tasks="tasks"
        :locale="locale"
        :selected-task-id="selectedTaskId"
        :resource-area="resourceArea"
        @on-expander-click="onExpanderClick"
        @set-selected-task="setSelectedTask"
        @on-task-change="onTaskChange"
      ></TaskListTableDefault>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { onMounted, PropType, ref, watch, nextTick } from "vue";
import { BarTask } from "../../types/barTask";
import { ResourceArea, Task } from "../../types/publicTypes";
import TaskListHeaderDefault from "./TaskListHeaderDefault.vue";
import TaskListTableDefault from "./TaskListTableDefault.vue";
const props = defineProps({
  headerHeight: {
    type: Number,
    default: 0,
  },
  rowWidth: {
    type: Number,
    default: 0,
  },
  scrollX: {
    type: Number,
    default: 0,
  },
  listWidth: {
    type: String,
    default: "",
  },
  fontFamily: {
    type: String,
    default: "",
  },
  fontSize: {
    type: String,
    default: "",
  },
  rowHeight: {
    type: Number,
    default: 0,
  },
  ganttHeight: {
    type: Number,
    default: 0,
  },
  scrollY: {
    type: Number,
    default: 0,
  },
  locale: {
    type: String,
    default: "",
  },
  tasks: {
    type: Array as PropType<Task[]>,
    default: () => [],
  },
  horizontalContainerClass: {
    type: String,
    default: "",
  },
  selectedTask: {
    type: Object as PropType<BarTask>,
    default: undefined,
  },
  taskListHeader: {
    type: String,
    default: "",
  },
  taskListTable: {
    type: String,
    default: "",
  },
  resourceArea: {
    type: Array as PropType<ResourceArea[]>,
    default: () => [],
  },
});
const emits = defineEmits([
  "onExpanderClick",
  "setSelectedTask",
  "updateListWidth",
  "onTaskChange",
]);
const taskListRef = ref();
const selectedTaskId = props.selectedTask ? props.selectedTask.id : "";
const horizontalContainerRef = ref();
const horizontalHeaderContainerRef = ref();
const onExpanderClick = (task: Task) => {
  emits("onExpanderClick", task);
};
const setSelectedTask = (task: string) => {
  emits("setSelectedTask", task);
};
const onTaskChange = (task: string) => {
  emits("onTaskChange", task);
};
watch(
  () => props.scrollY,
  () => {
    if (horizontalContainerRef.value) {
      horizontalContainerRef.value.scrollTop = props.scrollY;
    }
  }
);
watch(
  () => props.scrollX,
  () => {
    if (horizontalContainerRef.value) {
      horizontalContainerRef.value.scrollLeft = props.scrollX;
    }
    if (horizontalHeaderContainerRef.value) {
      horizontalHeaderContainerRef.value.scrollLeft = props.scrollX;
    }
  }
);
onMounted(() => {
  nextTick(() => {
    if (taskListRef.value) {
      emits("updateListWidth", props.resourceArea.length * props.rowWidth);
    }
  });
});
</script>